   <template>
	<div class="short-video-container">
	  <!-- 视频滑块 -->
	  <van-swipe 
		class="video-swiper" 
		vertical 
		:loop="false" 
		:show-indicators="false"
		:touchable="true"
		@change="handleSwipeChange"
		v-model="current"
	  >
		<van-swipe-item v-for="(item, index) in videoList" :key="index">
		  <!-- 视频播放器 -->
		  <div class="video-wrapper">
			<video
			  ref="videoPlayers"
			  :src="item.src"
			  :autoplay="current === index"
			  class="video-player"
			  webkit-playsinline
			  playsinline
			  x5-playsinline
			  @play="handlePlay(index)"
			  @pause="handlePause(index)"
			  @waiting="showLoading(index)"
			  @canplay="hideLoading(index)"
			></video>
			
			<!-- 加载指示器 -->
			<van-loading 
			  v-if="item.isLoading" 
			  class="loading-indicator" 
			  type="spinner" 
			  color="#fff"
			/>
		  </div>
		  
		  <!-- 视频信息 -->
		  <div class="video-info">
			<div class="username">@{{ item.username }}</div>
			<div class="desc">{{ item.desc }}</div>
		  </div>
		  
		  <!-- 右侧操作栏 -->
		  <div class="action-bar">
			<!-- 头像 -->
			<div class="avatar" @click="viewUserProfile(item.userId)">
			  <van-image
				round
				width="50px"
				height="50px"
				:src="item.avatar"
				fit="cover"
			  />
			</div>
			
			<!-- 点赞 -->
			<div class="action-item" @click="likeVideo(index)">
			  <van-icon 
				:name="item.isLiked ? 'like' : 'like-o'" 
				size="30px" 
				:color="item.isLiked ? '#ff2442' : '#fff'"
			  />
			  <div :class="['action-count', { 'liked-text': item.isLiked }]">
				{{ formatCount(item.likeCount) }}
			  </div>
			</div>
			
			<!-- 评论 -->
			<div class="action-item" @click="showComments(index)">
			  <van-icon name="comment-o" size="30px" color="#fff" />
			  <div class="action-count">{{ formatCount(item.commentCount) }}</div>
			</div>
			
			<!-- 分享 -->
			<div class="action-item" @click="shareVideo(index)">
			  <van-icon name="share-o" size="30px" color="#fff" />
			  <div class="action-count">{{ formatCount(item.shareCount) }}</div>
			</div>
		  </div>
		</van-swipe-item>
	  </van-swipe>
	  
	  <!-- 评论弹窗 -->
	  <van-popup 
		v-model="showCommentPopup" 
		position="bottom" 
		round
		:style="{ height: '60%' }"
	  >
		<div class="comment-popup">
		  <div class="comment-header">
			<div class="comment-title">{{ currentCommentCount }}条评论</div>
			<van-icon name="cross" @click="closeComments" />
		  </div>
		  
		  <van-list
			v-model="loadingComments"
			:finished="commentFinished"
			finished-text="没有更多了"
			@load="loadMoreComments"
		  >
			<div 
			  class="comment-item" 
			  v-for="comment in comments" 
			  :key="comment.id"
			>
			  <van-image
				round
				width="40px"
				height="40px"
				:src="comment.avatar"
				fit="cover"
			  />
			  <div class="comment-content">
				<div class="comment-username">{{ comment.username }}</div>
				<div class="comment-text">{{ comment.content }}</div>
			  </div>
			</div>
		  </van-list>
		  
		  <div class="comment-input">
			<van-field
			  v-model="commentText"
			  placeholder="说点什么..."
			  border
			>
			  <template #button>
				<van-button 
				  size="small" 
				  type="primary" 
				  @click="sendComment"
				  :disabled="!commentText.trim()"
				>
				  发送
				</van-button>
			  </template>
			</van-field>
		  </div>
		</div>
	  </van-popup>
	</div>
  </template>
  
  <script>
  import { 
	Swipe, 
	SwipeItem, 
	Image as VanImage, 
	Icon, 
	Popup, 
	List, 
	Field, 
	Button, 
	Loading,
	Toast
  } from 'vant';
  
  export default {
	name: 'ShortVideoPage',
	components: {
	  [Swipe.name]: Swipe,
	  [SwipeItem.name]: SwipeItem,
	  [VanImage.name]: VanImage,
	  [Icon.name]: Icon,
	  [Popup.name]: Popup,
	  [List.name]: List,
	  [Field.name]: Field,
	  [Button.name]: Button,
	  [Loading.name]: Loading
	},
	data() {
	  return {
		current: 0,
		videoList: [
		  {
			src: 'https://young.dpm.org.cn/statics//css/audition-file/files/1.mp4?v=2',
			username: '故宫展览',
			avatar: 'http://svq91szdo.hd-bkt.clouddn.com/ODLS.png?e=1747057564&token=y8VqyCCzCA1YGb9ERSa6ug02eQlm2yL6kK3y7vUX:zWqAI4XgGFVbbtcMMxaUo-QXWQ4=',
			desc: '对称的紫禁城里找不同 #抖音',
			isLiked: false,
			isLoading: false,
			likeCount: 1024,
			commentCount: 256,
			shareCount: 128,
			userId: 1
		  },
		  {
			src: 'https://young.dpm.org.cn/statics//css/audition-file/files/2.mp4?v=2',
			username: '故宫展览',
			avatar: 'http://svq91szdo.hd-bkt.clouddn.com/ODLS.png?e=1747057564&token=y8VqyCCzCA1YGb9ERSa6ug02eQlm2yL6kK3y7vUX:zWqAI4XgGFVbbtcMMxaUo-QXWQ4=',
			desc: '屋顶的形状大不同 #抖音',
			isLiked: false,
			isLoading: false,
			likeCount: 1024,
			commentCount: 256,
			shareCount: 128,
			userId: 1
		  }
		],
		showCommentPopup: false,
		commentText: '',
		currentCommentCount: 0,
		comments: [],
		loadingComments: false,
		commentFinished: false,
		currentVideoId: null,
		videoPlayers: []
	  };
	},
	mounted() {
	  this.videoPlayers = this.$refs.videoPlayers;
	},
	methods: {
	  handleSwipeChange(index) {
		// 暂停上一个视频
		if (this.videoPlayers[this.current]) {
		  this.videoPlayers[this.current].pause();
		}
		
		this.current = index;
		
		// 播放当前视频
		if (this.videoPlayers[index]) {
		  this.videoPlayers[index].play().catch(e => {
			console.error('Autoplay prevented:', e);
			// 处理自动播放被阻止的情况
			Toast('请点击视频以开始播放');
		  });
		}
	  },
	  handlePlay(index) {
		if (index !== this.current) return;
		this.videoList[index].isLoading = false;
	  },
	  handlePause(index) {
		// 可以在这里处理暂停逻辑
	  },
	  showLoading(index) {
		this.videoList[index].isLoading = true;
		// 设置加载超时
		this.loadingTimer = setTimeout(() => {
		  if (this.videoList[index].isLoading) {
			this.videoList[index].isLoading = false;
			Toast('视频加载超时');
		  }
		}, 10000);
	  },
	  hideLoading(index) {
		this.videoList[index].isLoading = false;
		clearTimeout(this.loadingTimer);
	  },
	  likeVideo(index) {
		const video = this.videoList[index];
		video.isLiked = !video.isLiked;
		video.likeCount += video.isLiked ? 1 : -1;
		
		if (video.isLiked) {
		  Toast('点赞成功');
		}
	  },
	  showComments(index) {
		this.currentVideoId = index;
		this.currentCommentCount = this.videoList[index].commentCount;
		this.showCommentPopup = true;
		this.loadComments();
	  },
	  loadComments() {
		// 模拟加载评论
		this.loadingComments = true;
		setTimeout(() => {
		  this.comments = [
			{
			  id: 1,
			  username: '用户1',
			  avatar: 'https://via.placeholder.com/40',
			  content: '这个视频很棒'
			},
			{
			  id: 2,
			  username: '用户2',
			  avatar: 'https://via.placeholder.com/40',
			  content: '点赞支持'
			}
		  ];
		  this.loadingComments = false;
		  this.commentFinished = true;
		}, 500);
	  },
	  loadMoreComments() {
		// 加载更多评论
		setTimeout(() => {
		  const newComments = Array.from({ length: 5 }, (_, i) => ({
			id: this.comments.length + i + 1,
			username: `用户${this.comments.length + i + 1}`,
			avatar: 'https://via.placeholder.com/40',
			content: `评论内容${this.comments.length + i + 1}`
		  }));
		  
		  this.comments = [...this.comments, ...newComments];
		  this.loadingComments = false;
		  
		  if (this.comments.length >= 15) {
			this.commentFinished = true;
		  }
		}, 1000);
	  },
	  closeComments() {
		this.showCommentPopup = false;
		this.commentText = '';
	  },
	  sendComment() {
		if (this.commentText.trim()) {
		  const newComment = {
			id: this.comments.length + 1,
			username: '当前用户',
			avatar: 'https://via.placeholder.com/40',
			content: this.commentText
		  };
		  
		  this.comments.unshift(newComment);
		  this.currentCommentCount++;
		  this.videoList[this.currentVideoId].commentCount++;
		  this.commentText = '';
		  
		  Toast('评论成功');
		}
	  },
	  shareVideo(index) {
		this.$dialog.confirm({
		  title: '分享到',
		  message: '选择分享方式',
		  showCancelButton: true,
		  confirmButtonText: '微信',
		  cancelButtonText: '朋友圈'
		})
		.then(() => {
		  // 确认分享
		  this.videoList[index].shareCount++;
		  Toast('分享成功');
		})
		.catch((action) => {
		  if (action === 'cancel') {
		    // 用户点击了朋友圈
		    this.videoList[index].shareCount++;
		    Toast('分享到朋友圈成功');
		  } else {
		    // 用户点击了取消按钮
		    Toast('已取消分享');
		  }
		});
	  },
	  viewUserProfile(userId) {
		Toast(`查看用户${userId}主页`);
	  },
	  formatCount(count) {
		if (count >= 10000) {
		  return (count / 10000).toFixed(1) + 'w';
		}
		return count;
	  }
	},
	beforeDestroy() {
	  // 清除所有定时器
	  clearTimeout(this.loadingTimer);
	}
  };
  </script>
  
  <style scoped>
  .short-video-container {
	width: 100%;
	height: 100vh;
	background-color: #000;
	position: relative;
	overflow: hidden;
  }
  
  .video-swiper {
	width: 100%;
	height: 100%;
  }
  
  .video-wrapper {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #000;
	overflow: hidden;
  }
  
  .video-player {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 10px;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  .loading-indicator {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 10;
  }
  
  .video-info {
	position: absolute;
	bottom: 120px;
	left: 20px;
	color: #fff;
	max-width: 70%;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
	background: rgba(0, 0, 0, 0.5);
	padding: 10px;
	border-radius: 8px;
  }
  
  .username {
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 5px;
  }
  
  .desc {
	font-size: 14px;
  }
  
  .action-bar {
	position: absolute;
	right: 15px;
	bottom: 100px;
	display: flex;
	flex-direction: column;
	align-items: center;
  }
  
  .action-item {
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
  }
  
  .action-count {
	color: #fff;
	font-size: 12px;
	margin-top: 5px;
  }
  
  .liked-text {
	color: #ff2442;
  }
  
  .comment-popup {
	display: flex;
	flex-direction: column;
	height: 100%;
  }
  
  .comment-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border-bottom: 1px solid #eee;
  }
  
  .comment-title {
	font-size: 16px;
	font-weight: bold;
  }
  
  .comment-item {
	display: flex;
	padding: 10px 15px;
	border-bottom: 1px solid #f5f5f5;
  }
  
  .comment-content {
	margin-left: 10px;
  }
  
  .comment-username {
	font-size: 14px;
	font-weight: bold;
	margin-bottom: 3px;
  }
  
  .comment-text {
	font-size: 14px;
  }
  
  .comment-input {
	padding: 10px;
	border-top: 1px solid #eee;
  }
  </style>